<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>地址管理</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/app.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/index.css">

    <link href="${pageContext.request.contextPath}/assets/css/addstyle.css" rel="stylesheet" type="text/css">
    <script src="${pageContext.request.contextPath}/assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/assets/js/vue.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/amazeui.min.js"></script>
    <script src="${pageContext.request.contextPath}/layer/layer.js"></script>
    <style type="text/css">
        hr {
            margin-top: 0px;
            margin-bottom: 0px;
        }

        a {
            color: #ed6d00;
        }

        .orange {
            color: #ed6d00 !important;
        }
    </style>
</head>

<body>

<div class="center">
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-address">
                <header data-am-widget="header" class="am-header am-header-default am-header-fixed">
                    <div class="am-header-left am-header-nav">
                        <a href="${pageContext.request.contextPath}/clientHome/userInfo" class="">
                            <i class="am-header-icon am-icon-chevron-left"></i>
                        </a>
                    </div>
                    <h1 class="am-header-title">
                        <a href="#title-link" class="">
                            地址管理
                        </a>
                    </h1>

                </header>

                <hr style="margin-top: 0px;margin-bottom: 0px;"/>
                <ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails" id="list">

                    <li class="user-addresslist" v-for="item in items">
                        <span class="new-option-r" v-on:click="setDefault(item.id)"><i class="am-icon-check-circle"
                                                                                       :class="{'orange':items.isDefault}"></i>默认地址</span>
                        <p class="new-tit new-p-re">
                            <span class="new-txt">{{item.contractName}}</span>
                            <span class="new-txt-rd2 orange">{{item.contractPhone}}</span>
                        </p>
                        <div class="new-mu_l2a new-p-re">
                            <p class="new-mu_l2cw">
                                <span class="title">地址：</span>
                                <span class="province">{{item.address}}</span></p>
                        </div>
                        <div class="new-addr-btn">
                            <a href="javascript:void(0);" v-on:click="del(item.id)"><i class="am-icon-trash"></i>删除</a>
                        </div>
                    </li>
                </ul>
                <div class="clear"></div>
                <a class="new-abtn-type" style="background-color: #ed6d00;"
                   href="${pageContext.request.contextPath}/clientHome/goAddAddress">添加新地址</a>


            </div>

            <script type="text/javascript">
                var list = new Vue({
                    el: "#list",
                    data: {
                        items: []
                    },
                    methods: {
                        setDefault: function (id) {
                            $(this).parent('.user-addresslist').addClass("orange").siblings().removeClass("orange");
                            $.ajax({
                                type: "get",
                                url: '${pageContext.request.contextPath}/clientAddress/setDefault?id=' + id,
                                dataType: 'json',
                                success: function (data) {

                                    if (data.success == true) {
                                        layer.msg("设置成功");
                                    } else {
                                        layer.msg(data.msg);
                                    }
                                }
                            });
                        },
                        del: function (id) {
                            $.ajax({
                                type: "get",
                                data: {
                                    id: id
                                },
                                url: '${pageContext.request.contextPath}/clientAddress/delete',
                                dataType: 'json',
                                success: function (data) {

                                    if (data.success == true) {
                                        layer.msg("删除成功");
                                        $.each(list.items, function (i, n) {
                                            if (n.id = id) {
                                                list.items.splice(i, 1);
                                            }
                                        });
                                    } else {
                                        layer.msg(data.msg);
                                    }
                                }
                            });
                        }
                    }
                });

                $(document).ready(function () {
                    $.ajax({
                        type: "get",
                        url: '${pageContext.request.contextPath}/clientAddress/getAll',
                        async: false,
                        dataType: 'json',
                        success: function (data) {

                            if (data.success == true && data.code == 200) {
                                list.items = data.obj;

                            }
                        }
                    });


                })
            </script>


        </div>


    </div>


</div>

</body>

</html>